<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-shopping-cart"></i> Product List </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="#"> Home </a> </li>
      <li class="active"> Product List </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">

  <div class="row">
    <div class="col-lg-12" ng-controller="inlineeditCtrl">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> <i class="fa fa-shopping-cart"></i> Product Listing </h3> 
        </div>
        <div class="panel-body">
        <div class="unseen">
          <table ng-table="tableParams" class="table">
            <tbody ng-repeat="p in $data">
              <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
                <td data-title="'ID'" sortable="'id'"><span ng-if="!p.$edit">{{p.id}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.id" />
                  </div></td>
                <td data-title="'Product Name'" sortable="'pn'"><span ng-if="!p.$edit">{{p.pn}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.pn" />
                  </div></td>
                <td data-title="'Category'" sortable="'ct'"><span ng-if="!p.$edit">{{p.ct}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.ct" />
                  </div></td>
                <td data-title="'Price'" sortable="'em'"><span ng-if="!p.$edit">{{p.em}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.em" />
                  </div></td>
                <td data-title="'Quantity'" sortable="'qt'"><span ng-if="!p.$edit">{{p.qt}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.qt" />
                  </div></td>
                <td data-title="'Date created'" sortable="'dc'"><span ng-if="!p.$edit">{{p.dc}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.dc" />
                  </div></td>
                <td data-title="'Status'" sortable="'ac'"><span ng-if="!p.$edit">{{p.ac}}</span>
                  <div ng-if="p.$edit">
                    <input class="form-control" type="text" ng-model="p.ac" />
                  </div></td>
                <td data-title="'Actions'" width="200">
                  <a ng-if="!p.$edit" href="" class="btn btn-warning btn-sm" ng-click="p.$edit = true"><i class="fa fa-edit"></i> Edit</a> 
                  <a ng-if="p.$edit" href="" class="btn btn-danger btn-sm" ng-click="p.$edit = false"><i class="fa fa-floppy-o"></i> Save</a>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>